<template>
  <div class="order-detail-container">
    <el-row justify="space-between" align="middle" class="header-row">
      <el-col><h2>订单详情</h2></el-col>
      <el-col>
        <el-button type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
      </el-col>
    </el-row>
    <el-card v-if="order" class="order-detail-card">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单编号">{{ order.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="核销码">{{ order.verificationCode || '-' }}</el-descriptions-item>
        <el-descriptions-item label="商家名称">{{ order.merchantName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="买家">{{ order.userName || '-' }}<template v-if="order.userPhone">（{{ order.userPhone }}）</template></el-descriptions-item>
        <el-descriptions-item label="订单状态">{{ payStatusText(order.payStatus) }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ order.payTime }}</el-descriptions-item>
        <el-descriptions-item label="预约时间">{{ order.reservationTime }}</el-descriptions-item>
        <el-descriptions-item label="原价">￥{{ (order.totalPrice ?? 0).toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="优惠">￥{{ (order.discountPrice ?? 0).toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="实付金额">￥{{ (order.payPrice ?? 0).toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="服务内容">
          <span>{{ Array.isArray(order.serviceNames) ? order.serviceNames.join(', ') : '' }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-empty v-else description="未找到订单信息" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getOrder } from '@/api/order/order'

const route = useRoute()
const router = useRouter()
const order = ref(null)

function payStatusText(status) {
  if (status === '0') return '未支付'
  if (status === '1') return '已支付'
  return status || '-'
}

function goBack() {
  router.back()
}

onMounted(async () => {
  const id = route.query.id
  if (!id) {
    order.value = null
    return
  }
  try {
    const res = await getOrder(id)
    if (res && res.code === 200 && res.data) {
      order.value = res.data
    } else {
      order.value = null
    }
  } catch (e) {
    order.value = null
  }
})
</script>

<style scoped>
.order-detail-container {
  max-width: 800px;
  margin: 32px auto;
  padding: 24px;
}
.header-row {
  margin-bottom: 24px;
}
.order-detail-card {
  margin-top: 16px;
}
</style> 